<template>
  <div class="lumianxinxi">
    <el-form :inline="true" :rules="rules" ref="formInline" :label-position="labelPosition" label-width="120px"
             :model="formInline" class="demo-form-inline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="资产主类" required>
            <el-input v-model.trim="formInline.assetClass" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产类型" required>
            <el-input v-model.trim="formInline.assetType" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编码" prop="assetCode">
            <el-input v-model.trim="formInline.assetCode" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="权属单位" prop="ownerUnit">
            <el-input v-model.trim="formInline.ownerUnit" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="路线编码" prop="routeCode">
            <el-select v-model.trim="formInline.routeCode" clearable placeholder="--请选择--">
              <el-option v-for="(item , index) in allCodes" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方向" prop="direction">
            <el-select v-model.trim="formInline.direction" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="起点桩号" prop="beginMile">
            <el-input v-model.trim="formInline.beginMile" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终点桩号" prop="endMile">
            <el-input v-model.trim="formInline.endMile" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="路面类型" prop="pavType">
            <el-select v-model.trim="formInline.pavType" placeholder="--请选择--">
              <el-option label="沥青路面" value="沥青路面"></el-option>
              <el-option label="水泥路面" value="水泥路面"></el-option>
              <el-option label="砂石路面" value="砂石路面"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="上面层材料" prop="uMaterial">
            <el-select v-model.trim="formInline.uMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上面层厚度" prop="uThickness">
            <el-input v-model.trim="formInline.uThickness" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中面层材料" prop="mMaterial">
            <el-select v-model.trim="formInline.mMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="中面层厚度" prop="mThickness">
            <el-input v-model.trim="formInline.mThickness" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下面层材料" prop="dMaterial">
            <el-select v-model.trim="formInline.dMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下面层厚度" prop="dThickness">
            <el-input v-model.trim="formInline.dThickness" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="基层材料" prop="grassrootsMaterial">
            <el-select v-model.trim="formInline.grassrootsMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="基层厚度" prop="grassrootsThickness">
            <el-input v-model.trim="formInline.grassrootsThickness" type="number" min="0"
                      placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="底基层材料" prop="dGrassrootsMaterial">
            <el-select v-model.trim="formInline.dGrassrootsMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="底基层厚度" prop="dGrassrootsThickness">
            <el-input v-model.trim="formInline.dGrassrootsThickness" type="number" min="0"
                      placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="垫层材料" prop="underMaterial">
            <el-select v-model.trim="formInline.underMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="垫层厚度" prop="underThickness">
            <el-input v-model.trim="formInline.underThickness" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="下封层材料" prop="dSealMaterial">
            <el-select v-model.trim="formInline.dSealMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下封层厚度" prop="dSealThickness">
            <el-input v-model.trim="formInline.dSealThickness" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="层间粘结材料" prop="mBondMaterial">
            <el-select v-model.trim="formInline.mBondMaterial" placeholder="--请选择--">
              <el-option label="沥青混凝土" value="沥青混凝土"></el-option>
              <el-option label="水泥混凝土" value="水泥混凝土"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="层间粘结状况" prop="mBondStatus">
            <el-input v-model.trim="formInline.mBondStatus" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经度" prop="lon">
            <el-input v-model.trim="formInline.lon" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model.trim="formInline.lat" type="number" min="0" placeholder="请输入..."></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="pic" :span="8">
          <el-form-item label="图片" required>
            <el-upload ref="pic" class="upload-demo" :bol="bol" :limit="1" :with-credentials="true"
                       :on-exceed="handleExceed" :on-remove="onRemove" :on-success="onSuccess" :on-error="onError"
                       list-type="picture" drag :action="this.assetsManBaseUrl + 'pavement/uploadPicture/' + uid">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="footer">
      <el-col :span="1" :offset="11" align="center">
        <el-button type="primary" @click="affirm('formInline')"><i class="fa fa-check"></i> 确认</el-button>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col :span="24" align="right">
        <el-button type="primary" @click="increased()"><i class="fa fa-plus"></i> 新增</el-button>
        <el-button type="danger" @click="del()"><i class="fa fa-trash-o"></i> 删除</el-button>
      </el-col>
    </el-row>
    <el-table stripe :data="tableData" @selection-change="handleSelectionChange" borderclass="luwangtable" border
              style="width: 100%">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" width="70" label="序号" align="center"></el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
          <a href="javascript:;" @click="handleEdit(scope.$index,scope.row)">
            <i class="fa fa-pencil-square-o"></i>
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="" label="图片" width="70">
        <template slot-scope="scope">
          <img :src="url + scope.row.picture" width="95%" height="40px" title="图片" v-if="scope.row.picture !='' "
               alt="">
        </template>
      </el-table-column>
      <el-table-column prop="assetClass" label="资产主类"></el-table-column>
      <el-table-column prop="ownerUnit" label="权属单位" width="190"></el-table-column>
      <el-table-column prop="assetType" label="资产类型"></el-table-column>
      <el-table-column prop="assetCode" label="资产编码"></el-table-column>
      <el-table-column prop="routeCode" label="路线编码"></el-table-column>
      <el-table-column prop="direction" label="方向"></el-table-column>
      <el-table-column prop="startMile" label="起点桩号" width="110"></el-table-column>
      <el-table-column prop="stopMile" label="终点桩号" width="110"></el-table-column>
      <el-table-column prop="pavType" label="路面类型"></el-table-column>
      <el-table-column prop="uMaterial" label="上面层材料" width="120"></el-table-column>
      <el-table-column prop="uThickness" label="上面层厚度" width="120"></el-table-column>
      <el-table-column prop="mMaterial" label="中面层材料" width="120"></el-table-column>
      <el-table-column prop="mThickness" label="中面层厚度" width="120"></el-table-column>
      <el-table-column prop="dMaterial" label="下面层材料" width="120"></el-table-column>
      <el-table-column prop="dThickness" label="下面层厚度" width="120"></el-table-column>
      <el-table-column prop="grassrootsMaterial" label="基层材料" width="120"></el-table-column>
      <el-table-column prop="grassrootsThickness" label="基层厚度"></el-table-column>
      <el-table-column prop="dGrassrootsMaterial" label="底基层材料" width="120"></el-table-column>
      <el-table-column prop="dGrassrootsThickness" label="底基层厚度" width="120"></el-table-column>
      <el-table-column prop="underMaterial" label="垫层材料" width="120"></el-table-column>
      <el-table-column prop="underThickness" label="垫层厚度"></el-table-column>
      <el-table-column prop="dSealMaterial" label="下封层材料" width="120"></el-table-column>
      <el-table-column prop="dSealThickness" label="下封层厚度" width="120"></el-table-column>
      <el-table-column prop="mBondMaterial" label="层间粘结材料" width="120"></el-table-column>
      <el-table-column prop="mBondStatus" label="层间粘结状况" width="120"></el-table-column>
      <el-table-column prop="lon" label="经度" width="120"></el-table-column>
      <el-table-column prop="lat" label="纬度" width="120"></el-table-column>
    </el-table>
  </div>
</template>
<style>
  .lumianxinxi a {
    color: #2c3e50;
  }

  .lumianxinxi .el-input{
    width: 220px;
  }

  .lumianxinxi th,.lumianxinxi td{
    text-align: center;
  }

  .lumianxinxi th:not(:first-of-type){
    background: #409eff;
    color: white;
  }

  .lumianxinxi .footer{
    margin-bottom: 30px;
  }

  .lumianxinxi img {
    vertical-align: bottom;
  }
</style>

<script>
  var _this;
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请正确填写内容'));
        } else {
          this.axios({
            method: 'get',
            url: _this.assetsManBaseUrl + "pavement/judgePavement",
            params: {
              assetCode: _this.formInline.assetCode,
              uid: _this.uid
            }
          }).then(function (response) {
            _this.jugStatus(response.data.nologin);
            if (response.data.data) {
              _this.bool = true;
              callback();
              return;
            }
            return callback(new Error('资产编码不能重复'));
          }).catch(function (error) {
            console.log(error);
          });
        }
      };
      return {
        labelPosition: 'right',
        formInline: {
          assetClass: '路面',
          assetType: '路面信息',
          ownerUnit: "宁波交通投资控股有限公司",
          direction: ""
        },
        tableData: [],
        allCodes: [],
        options: [{
          value: '上行',
          label: '上行'
        }, {
          value: '下行',
          label: '下行'
        }],
        id: '',
        arr: '',
        fileList: [],
        url: this.assetsManBaseUrl,
        bol: false,
        bool: false,
        uid: this.getCookie('name'),
        rules: {
          ownerUnit: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          assetType: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          assetCode: [{required: true, validator: validatePass, trigger: 'blur'}],
          routeCode: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          direction: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          beginMile: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          endMile: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          pavType: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          uMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          uThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          mMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          mThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          dMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          dThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          grassrootsMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          grassrootsThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          dGrassrootsMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          dGrassrootsThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          underMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          underThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          dSealMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          dSealThickness: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          mBondMaterial: [{required: true, message: '请正确选择内容', trigger: 'change'}],
          mBondStatus: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          lon: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
          lat: [{required: true, message: '请正确填写内容', trigger: 'blur'}],
        }
      }
    },
    created() {
      _this = this;
      this.demand();
      this.seekData();
    },
    methods: {
      //上传成功
      onSuccess(response) {
        if (response) {
          this.bol = true;
          this.$message.success('上传成功');
        } else {
          this.$message.error('上传失败');
        }
      },
      //删除
      onRemove() {
        this.bol = false;
        this.$message.info('移除成功');
      },
      //上传失败
      onError() {
        this.$message.error('上传失败');
      },
      //上传数量
      handleExceed(files, fileList) {
        this.$message.warning("当前限制选择 1 个文件");
      },
      //查询接口
      demand() {
        this.axios({
          method: 'get',
          url: _this.assetsManBaseUrl + 'pavement/findAllTempPavement',
          params: {
            uid: _this.uid
          }
        }).then(function (response) {
          _this.tableData = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })
      },
      //修改
      handleEdit(index, row) {
        this.$router.push({
          path: '/ll/zichanguanli/lumianxinxi_edit',
          query: {
            id: row.id
          }
        })
      },
      //获取表格的id
      handleSelectionChange(val) {
        this.id = '';
        for (let i = 0; i < val.length; i++) {
          _this.id += val[i].id.toString() + ','
        }
      },
      //获取所有路线编码
      seekData() {
        this.axios({
          method: 'get',
          url: _this.assetsManBaseUrl + 'route/findRouteCode',
          params: {
            uid: _this.uid
          }
        }).then(function (response) {
          _this.jugStatus(response.data.nologin);
          _this.allCodes = response.data.data;
        }).catch(function (error) {
          console.log(error);
        });
      },
      //添加
      affirm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid && this.bol && this.bool) {
            this.axios({
              method: 'post',
              url: _this.assetsManBaseUrl + 'pavement/addTempPavement',
              data: {
                assetClass: _this.formInline.assetClass,
                ownerUnit: _this.formInline.ownerUnit,
                assetType: _this.formInline.assetType,
                assetCode: _this.formInline.assetCode,
                routeCode: _this.formInline.routeCode,
                direction: _this.formInline.direction,
                beginMile: _this.formInline.beginMile,
                endMile: _this.formInline.endMile,
                pavType: _this.formInline.pavType,
                uMaterial: _this.formInline.uMaterial,
                uThickness: _this.formInline.uThickness,
                mMaterial: _this.formInline.mMaterial,
                mThickness: _this.formInline.mThickness,
                dMaterial: _this.formInline.dMaterial,
                dThickness: _this.formInline.dThickness,
                grassrootsMaterial: _this.formInline.grassrootsMaterial,
                grassrootsThickness: _this.formInline.grassrootsThickness,
                dGrassrootsMaterial: _this.formInline.dGrassrootsMaterial,
                dGrassrootsThickness: _this.formInline.dGrassrootsThickness,
                underMaterial: _this.formInline.underMaterial,
                underThickness: _this.formInline.underThickness,
                dSealMaterial: _this.formInline.dSealMaterial,
                dSealThickness: _this.formInline.dSealThickness,
                mBondMaterial: _this.formInline.mBondMaterial,
                mBondStatus: _this.formInline.mBondStatus,
                lon: _this.formInline.lon,
                lat: _this.formInline.lat,
                uid: _this.uid
              }
            }).then(function (response) {
              if (response.data.data) {
                for (let item in _this.formInline) {
                  _this.formInline[item] = '';
                }
                _this.formInline.assetClass = '路面';
                _this.formInline.ownerUnit = "宁波交通投资控股有限公司";
                _this.formInline.assetType = '路面信息';
                _this.demand();
                _this.seekData();
                _this.$refs[formName].clearValidate();
                _this.$refs.pic.clearFiles();
              }
            }).catch(function (error) {
              console.log(error);
            })
          } else {
            _this.$message.error('请正确填写并上传图片！');
          }
        })
      },
      //删除
      del() {
        if (this.id) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.axios({
              method: 'delete',
              url: _this.assetsManBaseUrl + 'pavement/batchDeletePavement',
              params: {
                str: _this.id,
                uid: _this.uid
              }
            }).then(function (response) {
              _this.jugStatus(response.data.nologin);
              if (response.data.data) {
                _this.demand();
                _this.$message.success('删除成功！');
              }
            }).catch(function (error) {
              console.log(error);
            })
          }).catch(() => {
            this.$message.info('已取消删除！');
          });
        } else {
          this.$message.warning('请检查是否勾选再删除！');
        }
      },
      //新增
      increased() {
        if (this.id.length > 0) {
          this.axios({
            method: "get",
            url: _this.assetsManBaseUrl + "pavement/batchAddPavement",
            params: {
              add: _this.id,
              assetType: _this.formInline.assetType,
              uid: _this.uid
            }
          }).then(function (response) {
            _this.jugStatus(response.data.nologin);
            if (response.data.data) {
              _this.$router.push({
                path: "/ll/zichanguanli/lumian"
              });
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else if (this.tableData && this.tableData.length > 0) {
          _this.arr = "";
          for (let item of _this.tableData) {
            _this.arr += item.id.toString() + ",";
          }
          this.axios({
            method: "get",
            url: _this.assetsManBaseUrl + "pavement/batchAddPavement",
            params: {
              add: _this.arr,
              assetType: _this.formInline.assetType,
              uid: _this.uid
            }
          })
            .then(function (response) {
              _this.jugStatus(response.data.nologin);
              if (response.data.data) {
                _this.$router.push({
                  path: "/ll/zichanguanli/lumian"
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          this.$message.warning('没有可新增！');
        }
      }
    }
  }
</script>
